<template>
  <div>
    <h3>News</h3>

    <span @click="btn1"> 国内新闻</span>
    <span @click="btn2" > 国际新闻</span>
    <span @click="btn3"> 武汉新闻</span>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('News创建')
  },
  beforeDestroy() {
    console.log('News销毁')
  },
  methods:{
    btn1(){
      this.$router.push({
        name:"newsdetail",
        query:{
          title:'国内'
        }
      })
    },
    btn2(){
      this.$router.push({
        name:"newsdetail",
        query:{
          title:'国际'
        }
      })
    },
    btn3(){
      this.$router.push({
        name:"newsdetail",
        query:{
          title:'武汉'
        }
      })
    }
  }
}
</script>



<style scoped>
.news {
  background-color: aqua;
}
span{
  color: #41b883;
  margin: 10px 40px;
}
</style>